<template>
	<view class="container">
		<!-- tab栏 -->
		<view class="poab" v-if="types == 1 || types == 3">
			<u-icon name="checkmark-circle" color="red" size="45" @click="clonse" label="确定"></u-icon>
		</view>
		<view class="poab-type" v-if="types == 2">
			开始服务时间，你希望技师多久到达？（因交通状况，可能会晚到）
		</view>
		<scroll-view class="scroll-view_H b-t b-b" scroll-x>
			<block v-for="(item, index) in dateArr" :key="index">
				<div class="flex-box" @click="selectDateEvent(index, item)" :style="{ 'box-shadow': index == dateActive ? 'inset 0 -2px 0 0 ' + selectedTabColor : '' }">
					<view class="date-box">
						<text class="days" :style="{ color: index == dateActive ? selectedTabColor : '#333' }">{{ item.week }}</text>
						<text class="date" :style="{ color: index == dateActive ? selectedTabColor : '#333' }">{{ item.date }}</text>
					</view>
				</div>
			</block>
		</scroll-view>
		<!-- 时间选项 -->
		<view class="time-box">
			<block v-for="(item, _index) in timeArr" :key="_index">
				<view class="item">
					<view
						class="item-box"
						:class="{ disable: item.disable, active: avartimeActive.indexOf(item.time) >= 0 }"
						:style="{
							filter: avartimeActive.includes(item.time)  ? 'opacity(0.9)' : ''
						}"
						@click="selectTimeEvent(_index, item)"
					>
						<text>{{ item.time }}</text>
						<text class="all" v-if="avartimeActive.includes(item.time) && types == 1">休息</text>
						<text class="all" style="background: #e7e6e6;
    color: #bdb8b8;" v-else-if="avartimeActive.includes(item.time) && (types == 2 || types == 3)">不可预约</text>
						<text class="all" v-else>可预约</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import { dateData, timeData, timeStamp } from './date.js';
let maxIndex;
export default {
	props: {
		//开始时间选项
		startTime: {
			type: String,
			default: '00:00'
		},
		//开始时间选项
		types: {
			type: String,
			default: '1'
		},
		//结束时间选项
		endTime: {
			type: String,
			default: '23:30'
		},
		// 提前预约的时间
		advanceTime: {
			type: Number,
			default: 0
		},
		// 默认选择的时间段间隔
		timeSlot: {
			type: Number,
			default: 2
		},
		//时间间隔
		timeInterval: {
			type: [Number, String],
			default: 0.5 //半小时
		},
		//选中的tab颜色
		selectedTabColor: {
			type: String,
			default: '#0092D5'
		},
		//选中的时间颜色
		selectedItemColor: {
			type: String,
			default: '#0094D7'
		},

		//禁用显示的文本
		disableText: {
			type: String,
			default: '约满'
		}
	},
	data() {
		return {
			dateArr: [], //日期数据
			timeArr: [], //时间数据
			dateActive: 0, //选中的日期索引
			timeActive: ['周一','周二','周三','周四','周五','周六','周日'], //选中的时间索引
			avartimeActive: [], //选中的时间索引
			oldTimeActive: [], //保存用户筛选的时间
			selectDate: '', //选择的日期数据
			selectTime: [], //选择的时间
			oldSelectTime: '',
			currentTimeStamp: '',
			currentTime: '',
			tabs: 0
		};
	},
	created() {
		//获取日期tab数据
		this.dateArr = dateData();
		//获取时间数据
		this.timeArr = timeData(this.startTime, this.endTime, this.timeInterval);
		let week = this.dateArr[0].week
		
		maxIndex = this.timeArr[this.timeArr.length - 1]['index'];
		//当前时间戳
		this.currentTimeStamp = Date.now() + this.advanceTime * 3600 * 1000;
		this.currentTime = timeStamp(this.currentTimeStamp).hour;
		let data = []
		for (var i = 0; i < this.timeActive.length; i++) {
		  data[this.timeActive[i]] = [];
		}
		let refusal_order_time = []
		if(this.types == 1 || this.types == 2){
			refusal_order_time = uni.getStorageSync('refusal_order_time')
		}else{
			refusal_order_time = uni.getStorageSync('refusal_order_order_time')
		}
		if(refusal_order_time && typeof(refusal_order_time)!='undefined'){
			this.timeActive = refusal_order_time
			this.avartimeActive = this.timeActive[week]
		}else{
			this.timeActive = data
		}
		console.log(this.timeActive)
	},
	methods: {
		clonse(){
			this.$emit('clonse');
		},
		selectDateEvent(index, item) {
			console.log(item)
			
			this.dateActive = index;
			this.avartimeActive = this.timeActive[item.week]
			this.selectDate = `${this.dateArr[index]['date']}(${this.dateArr[index]['week']})`;
			//this.$emit('selectTime', `${this.selectDate}${this.selectTime.join('-')}`);
		},
		selectTimeEvent(index, item) {
			let week = this.dateArr[this.dateActive].week
			let that = this
			
			let arr = this.timeActive[week]
			if (arr.indexOf(item.time) !== -1) {
				if(that.types == 2 || that.types == 3){
					this.$u.toast("该时间段休息");
					return false
				}
			  arr.splice(arr.indexOf(item.time), 1); // 移除元素
			} else {
				if(that.types == 2 || that.types == 3){
					console.log(item)
					let str = week +' ' + item.time
					this.$emit('selectTime', str);
					return false
				}	
				arr.push(item.time); // 添加元素
			}
			this.avartimeActive = arr
			this.timeActive[week] = arr
			//var jsonStr =  JSON.parse(this.timeActive);
			let str = {'周一':this.timeActive['周一'],'周二':this.timeActive['周二'],'周三':this.timeActive['周三'],
			'周四':this.timeActive['周四'],'周五':this.timeActive['周五'],'周六':this.timeActive['周六'],'周日':this.timeActive['周日']}
			this.$emit('selectTime', str);
		}
	},
	
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
